<template>
	<view class="users">
		<scroll-view scrollY class="users-scroll" @scrolltolower="reachBottom">
			<view class="users-nav">
				<!-- 下面主体 -->
				<view class="users-nav-info" v-for="(item, index) in users" :key="index" @tap="goinfo(item.userId)">
					<view class="users-nav-info-img">
						<image :src="item.avatarUrl"></image>
					</view>
					<view class="users-nav-info-text">
						<view class="title">
							<text>{{item.nickname}}</text>
							<u-icon name="man" color="#4fb7ea" v-if="item.gender==1"></u-icon>
							<u-icon name="woman" color="#ff557f" v-else-if="item.gender==2"></u-icon>
						</view>

						<text class="introduce" v-if="item.signature">{{item.signature}}</text>
					</view>
					<view class="users-nav-info-buttom">
						<u-button size="mini" text="关注" shape="circle" icon="plus"></u-button>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: ['users'],
		methods: {
			reachBottom() {
				this.$parent.$parent.$parent.$parent._getmylist()
			},
			goinfo(uid) {
				uni.navigateTo({
					url: "/view/UserInfo/UserInfo?id=" + uid
				})
			}
		},
		created() {
			console.log(this.users);
		}
	}
</script>

<style lang="scss">
	.users {
		margin-top: 30rpx;

		&-scroll {
			height: calc(100vh - 84px);
		}

		&-nav {
			// padding: 10rpx 30rpx;
			background-color: #fff;
			border-radius: 10px;
			// display: flex;
			// margin: 0 15px;

			&-title {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background-color: #fff;
				padding: 30rpx;
				font-weight: 600;
				font-size: 17px;
			}

			&-info {
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				justify-content: space-between;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;

				&-img {
					display: flex;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 100%;
						border: 1px solid #F5F5F5;
					}


				}

				&-text {
					display: flex;
					margin-left: 20rpx;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					flex-direction: column;
					line-height: 50rpx;

					.title {

						display: flex;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.introduce {
						width: 450rpx;
						height: 55rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 25rpx;
						color: #999;
					}
				}


			}
		}
	}
</style>
